<template>
    <a-form layout="inline" v-bind="$attrs">
        <slot></slot>
    </a-form>
</template>
<script setup>
import { onMounted, provide, ref, watch } from "vue";


const value = defineModel('value', {
    default: () => { return {} }
});

const CacheData = ref({});
const Parmas = ref({});

const Refs = ref([]);


provide('Parmas', Parmas);
provide('SetRef', (ref) => {
    Refs.value.push(ref);
})
provide('SetItemKey', (key) => {
    Parmas.value[key] = null;
    CacheData.value[key] = null;
})
provide('DeleteItemKey', (key) => {
    delete Parmas.value[key]
    delete CacheData.value[key]
})

onMounted(() => {
    CacheData.value = JSON.parse(JSON.stringify(Parmas.value));
})

watch(Parmas, (val) => {
    value.value = val
}, { deep: true })


defineExpose({
    SetDate(data) {
        for (const key in data) {
            Parmas.value[key] = data[key];
        };
        CacheData.value = JSON.parse(JSON.stringify(Parmas.value));
    },
    ReSet() {
        Parmas.value = JSON.parse(JSON.stringify(Parmas.value));
        for (let i = 0; i < this.refs.length; i++) {
            this.refs[i].ReSet && this.refs[i].ReSet();
        }
    }
})




</script>
<style lang="less" scoped></style>